import './index.less';
import potImg from '@/assets/images/pot.png';
import { useRef } from 'react';

// QUESTION: 为啥不能用@/utils/xx 引入
import { statusTextConvert } from '../../utils/filters.ts';

import Fault from './Fault';
import Offline from './Offline';
import FaultPop from './FaultPop';

/**
 * 模块化：js 拆分
 * 组件化：组件拆分
 *
 * React开发者工具调试：chrome 插件：React Developer Tool
 * 定义组件：函数组件。类组件 （一般用函数组件多一点）
 * 函数式组件：
 *
 */

export default function Banner({ propsBanner }: any) {
  // propsBanner 是 props 子组件传参
  // status 为电饭煲的状态
  const { status, fault, isOnline, setWorkTime, warmDuration, preTime } =
    propsBanner;
  /**
   * createRef 主要用于 class 组件。而函数组件通常使用 useRef
   * 通过 ref 操作 Dom
   */
  const childRefs: any = useRef(null);
  // 故障弹窗
  function showErrorDetail() {
    childRefs.current.show();
  }

  function filterBg(): string {
    if (!isOnline) {
      return '#737373';
    } else {
      if (fault > 0) {
        return '#FA4B4B';
      } else {
        return '#16BA7E';
      }
    }
  }
  /**
   * @description 获取指定分钟后的时间
   * @param minutes 分钟
   * @returns { hourStr: string } 20:00 的字符串
   */
  function getMinuteAfter(minutes: number): { hourStr: string } {
    const now = new Date();
    const minuteAfter = new Date(now.getTime() + minutes * 60 * 1000);

    const hour =
      minuteAfter.getHours() < 10
        ? `0${minuteAfter.getHours()}`
        : minuteAfter.getHours();
    const minute =
      minuteAfter.getMinutes() < 10
        ? `0${minuteAfter.getMinutes()}`
        : minuteAfter.getMinutes();
    const hourStr = `${hour}:${minute}`;

    return { hourStr };
  }

  // console.log(getMinuteAfter(60).hourStr, 'getMinuteAfter');

  return (
    <div>
      <div
        className="banner"
        style={{
          background: filterBg()
        }}
      >
        <div className="pot">
          <img src={potImg} alt="" />
        </div>
        <div className="status">
          {/* 设备离线的时候，不显示设备的状态小圆圈样式 */}
          {isOnline && <span></span>}
          <div>{statusTextConvert(status)}</div>
        </div>
        {/* 只有在设备运行/预约/保温的状态下，才显示剩余时间 */}

        {/* 预约中=3 保温中=2 运行中=1 */}
        <div className="time-w">
          {status === 3 ? (
            <div className="time">
              预计 {getMinuteAfter(preTime).hourStr} 开始烹饪
            </div>
          ) : null}
          {status === 2 && warmDuration ? (
            <div className="time">保温运行时间：{warmDuration}min</div>
          ) : null}
          {status === 1 && setWorkTime ? (
            <div className="time">运行剩余时间：{setWorkTime}min</div>
          ) : null}
        </div>
      </div>
      {/* 故障 */}
      {fault !== 0 && (
        <div onClick={showErrorDetail}>
          <Fault faultProps={fault} />
        </div>
      )}
      {/* 故障详情
       * 在 forwardRef 中接收父组件的参数 {...{ fault }}
       */}
      <FaultPop {...{ fault }} ref={childRefs} />
      {/* 离线, 离线的权限大于故障 */}
      {!isOnline && <Offline />}
    </div>
  );
}
